<script setup lang="ts">
import router from "../../router"
import { onMounted, ref } from "vue"
import { GetEmployeeList } from "../../api/employee"

const pageParams = {
  pageIndex: 1,
  pageSize: 30
}

const EmployeeList = ref<never>([])

onMounted(() => {
  getData()
})

const goHome = function() {
  router.push("/")
}

const getData = async function() {
  const res = await GetEmployeeList(pageParams)
  EmployeeList.value = res.data
}

const goToEdit = function(employeeId?: string) {
  if (employeeId) {
    router.push({
      name: "EditEmployee",
      params: {
        id: employeeId
      }
    })
  } else {
    router.push({
      name: "EditEmployee",
      params: {
        id: 0
      }
    })
  }
}
</script>

<template>
  <div class="staff">
    <el-container class="h-full">
      <el-header height="10%">
        <div class="title">机组人员</div>
      </el-header>
      <el-main>
        <div class="flex">
          <div
            v-for="(value, index) in EmployeeList as any"
            :key="index"
            class="flex justify-center items-start w-[100px] flex-col m-1"
            @click="goToEdit(value.employeeId)"
          >
            <img width="100px" :src="'http://192.168.2.25:5173/' + value.photo" alt="1" />
            <div>姓名：{{ value.name }}</div>
            <div>岗位：{{ value.position }}</div>
          </div>
        </div>
      </el-main>
      <el-footer height="10%">
        <el-button type="primary" @click="goHome">返回</el-button>
        <el-button type="primary" @click="goToEdit()">添加</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.staff {
  width: 100%;
  height: 100%;
  background-color: #51969b;
}

.title {
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: #c2c87a;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
